<template>
	<view v-if="pageShow" class="container">
		<!-- 需求状态、发布时间、擅长服务、所在地筛选 -->
		<view class="chose-area solid-bottom">
			<view class="chose-type">
				<picker :range="sortData" @change="changeSort" :value="sortValue" range-key="name">
					<view class="chose-item">
						<text v-if="sortKey" class="title">{{sortData[sortKey].name}}</text>
						<text v-else class="title">需求状态</text>
						<text class="icon"></text>
					</view>
				</picker>
				<picker :range="dateData" @change="changeDate" :value="dateValue" range-key="name">
					<view class="chose-item">
						<text v-if="dateKey" class="title">{{dateData[dateKey].name}}</text>
						<text v-else class="title">发布时间</text>
						<text class="icon"></text>
					</view>
				</picker>
				<chose-cate @change1="cateName" @changes1="cancelCate" :cateList="categoryList">
					<view class="chose-item">
						<text v-if="categoryName" class="title">{{categoryName}}</text>
						<text v-else class="title">擅长服务</text>
						<text class="icon"></text>
					</view>
				</chose-cate>
				<!-- <chose-region @change1="regionName" @changes1="regionValue">
					<view class="chose-item">
						<text v-if="choseRegion.length > 0" class="title">{{choseRegion[1].name}}</text>
						<text v-else class="title">所在地</text>
						<text class="icon"></text>
					</view>
				</chose-region> -->
				<view class="chose-item"  @click="showAddr">
					<text v-if="addrName" class="title">{{addrName}}</text>
					<text v-else class="title">所在地</text>
					<text class="icon"></text>
				</view>
			</view>
		</view>
		
		<!-- 需求列表 -->
		<scroll-view scroll-y="true" style="height: calc(100vh - 72rpx);" refresher-threshold="50" :refresher-background="'#F7F7F7'"
			:refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore">
			<view class="demand-list">
				<view class="list" v-for="(item, index) in demandList" :key="index" @click="goDetail(item)">
					<view class="header">
						<view class="title">
							<text class="title-icon"></text>
							<text class="name">{{item.name}}</text>
						</view>
						<view class="price">
							<text>{{item.money == 0?'面议':'¥' + item.money}}</text>
						</view>
					</view>
					<view class="main-content">
						<text>描述：{{item.describe}}</text>
					</view>
					<view class="bottom">
						<view class="local">
							<text>{{item.city_name}}</text>
							<text v-if="item.join_number > 0" style="margin-left: 14rpx;">{{item.join_number}}人投标</text>
						</view>
						<view class="join-type">
							<text>{{item.status == 0?'可参与':item.status == 1?'已中标':item.status == 2?'已取消':''}}</text>
						</view>
					</view>
				</view>
				<uni-load-more v-if="demandList.length > 0" :status="listStatus"></uni-load-more>
				<view v-if="demandList.length === 0" class="empty-wrap" >
				  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
				  <text class="tips">暂无内容</text>
				</view>
			</view>
		</scroll-view>
		<!-- 服务类目 -->
		<view>
			<u-popup :show="categoryShow" 
				closeable 
				mode="bottom"
				@close="categoryShow=false"
				:closeOnClickOverlay="true">
				<view class="cate-title">
					<view class="title solid-bottom">
						<view class="all-cate" @click="choseAll">全部</view>
						<view class="title-chose">擅长服务</view>
					</view>
					<view class="VerticalBox">
						<scroll-view class="VerticalNav" :scroll-y="true">
							<view class="cu-item" 
								:class="index==tabCur?'first-cate cur':''" 
								v-for="(item,index) in categoryList" 
								:key="index" 
								@tap="tabSelect(item, index)">
								{{item.name}}
							</view>
						</scroll-view>
						<scroll-view class="vertical-main" :scroll-y="true">
							<view class="right-main">
								<view class="main-item" v-for="(item, index) in cateSecondList" :key="index">
									<view class="item-title">
										{{item.name}}
									</view>
									<view class="item-content">
										<view class="item-val" v-for="(val, idx) in item.third" :key="idx" @click="thirdClick(val)">
											{{val.name}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="bottom-btn">
			<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/free-post-demand.png" class="img" @click="goPostDemand"></image>
		</view>
		
		<view v-if="showCityList">
			<u-popup :show="showCityList" @close="closeCityList">
				<view class="city_list">
					<choseAddr @getCityInfo="getCityInfo"></choseAddr>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import homeApi from "@/api/home.js"
	import serviceApi from "@/api/service.js"
	import demandApi from "@/api/demand.js"
	import choseRegion from '@/components/chose-region/chose-region.vue'
	import choseCate from "@/components/chose-cate/chose-cate.vue"
	import choseAddr from '@/components/WF-address/WF-address.vue'
	export default {
		components: {
			choseRegion,
			choseCate,
			choseAddr
		},
		data() {
			return {
				//需求列表数据
				pageShow: false,
				demandList: [],
				
				//省市区
				choseRegion: [],
				cityCode: '',
				
				//服务类目
				categoryShow: false,
				tabCur: 0,
				categoryList: [],
				cateFirstId: '',
				cateSecondId: '',
				cateSecondList: [],
				cateThirdId: '',
				cateThirdName: '',
				categoryName: '',
				
				//需求状态
				sortValue: 0,
				sortData: [
					{
						id: '',
						name: '全部'
					},
					{
						id: '0',
						name: '可参与'
					},
					{
						id: '1',
						name: '已中标'
					}
				],
				sortKey: 0,
				
				//发布时间
				dateValue: 0,
				dateData: [
					{
						id: '0',
						name: '全部'
					},
					{
						id: '1',
						name: '今日'
					},
					{
						id: '3',
						name: '最近三天'
					},
					{
						id: '7',
						name: '最近一周'
					},
					{
						id: '30',
						name: '最近一个月'
					}
				],
				dateKey: 0,
				
				//分页参数
				page: 1,
				pageSize: 10,
				isRefreshing: false,
				listStatus: 'nomore',
				
				addrName: '',
				showCityList: false
			}
		},
		onLoad() {
			this.getCategoryData()
			this.getData()
		},
		methods: {
			//展示区域搜索
			showAddr() {
				this.showCityList = true
			},
			
			closeCityList() {
				this.showCityList = false
				this.addrName = '所在地'
				this.cityCode = ''
				this.page = 1
				this.getData()
			},
			
			getCityInfo(val) {
				console.log(val)
				this.cityCode = val.id
				this.addrName = val.name
				this.page = 1
				this.getData()
				this.showCityList = false
			},
			
			//获取需求列表数据
			async getData() {
				this.listStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj;
				if(!this.sortData[this.sortKey].id) {
					obj = {
						page: this.page,
						pagesize: this.pageSize,
						one_cate_id: this.cateFirstId,
						two_cate_id: this.cateSecondId,
						third_cate_id: this.cateThirdId,
						time_type: this.dateData[this.dateKey].id,
						city_code: this.cityCode
					}
				}else {
					obj = {
						page: this.page,
						pagesize: this.pageSize,
						one_cate_id: this.cateFirstId,
						two_cate_id: this.cateSecondId,
						third_cate_id: this.cateThirdId,
						status: this.sortData[this.sortKey].id,
						time_type: this.dateData[this.dateKey].id,
						city_code: this.cityCode
					}
				}
				const filteredObj = Object.fromEntries(Object.entries(obj).filter(([key, value]) => value !== ''));
				let res = await demandApi.getDemanList(filteredObj)
				if(res.code === 1) {
					let arr = []
					if (this.page == 1) {
						this.demandList = []
					}
					let newList = res.data.data
					if (newList.length >= this.pageSize) {
						this.listStatus = 'more'
					} else {
						this.listStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: val.name,
							describe: val.describe,
							money: val.money,
							city_name: val.city_name,
							status: val.status,
							join_number: val.join_number
						}
						this.demandList.push(obj)
					})
					this.pageShow = true
					this.isRefreshing = false
					uni.hideLoading()
				}
			},
			
			//省市切换
			regionName(res) {
				if(res[1].id == 1) {
					this.cityCode = ''
					this.choseRegion = res
					this.page = 1
					this.getData()
				}else {
					this.page = 1
					this.choseRegion = res
					this.cityCode = res[1].id
					this.getData()
				}
			},
			regionValue(res) {
				console.log(res)
			},
			
			//需求类型选择
			cateName(e) {
				console.log(e)
				this.categoryName = e[1].name
				this.cateFirstId = e[0].id
				this.cateSecondId = e[1].id
				this.getData()
				// this.cateThirdId = e[2].id
			},
			
			cancelCate() {
				this.categoryName = ''
				this.cateFirstId = ''
				this.cateSecondId = ''
				this.page = 1
				this.getData()
			},
			
			//需求状态
			changeSort(e) {
				this.page = 1
				this.sortKey = e.detail.value
				this.getData()
			},
			
			//需求发布时间
			changeDate(e) {
				this.page = 1
				this.dateKey = e.detail.value
				this.getData()
			},
			
			//服务类目弹框
			showCategory() {
				this.cateFirstId = this.categoryList[0].id
				this.getSecondCate()
				this.categoryShow = true
			},
			
			//获取服务类目
			async getCategoryData() {
				let res = await homeApi.getServiceCate()
				if(res.code === 1) {
					this.categoryList = res.data
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//服务分类选择全部
			choseAll() {
				this.cateThirdName = ''
				this.cateFirstId = ''
				this.cateSecondId = ''
				this.cateThirdId = ''
				this.getData()
				this.categoryShow = false
			},
			
			//服务类目切换
			tabSelect(item, index) {
				this.tabCur = index;
				this.cateFirstId = item.id
				this.getSecondCate()
			},
			
			//获取二类三类服务类目
			async getSecondCate() {
				let obj = {
					c_id: this.cateFirstId
				}
				let res = await serviceApi.getServiceCateChild(obj)
				if(res.code === 1) {
					this.cateSecondList = res.data
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			//三级类目点击事件
			thirdClick(val) {
				this.page = 1
				this.cateThirdName = val.name
				this.cateThirdId = val.id
				this.cateSecondId = val.s_id
				this.cateFirstId = val.c_id
				this.categoryShow = false
				this.getData()
			},
			
			//跳转需求详情
			goDetail(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: '/pagesDemand/demandDetail/demandDetail?id=' + item.id
				})
			},
			
			//跳转发布需求
			goPostDemand() {
				uni.switchTab({
					url: '/pages/postDemand/postDemand'
				})
			},
			
			//下拉刷新
			refresherrefresh() {
				this.isRefreshing = true;
				this.page = 1
				this.getData()
			},
			
			//上拉加载
			loadMore() {
				if (this.listStatus == 'more') {
					this.page += 1
					this.getData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "demandList.scss";
</style>
